<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>commodity-class</title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        img {
            vertical-align: middle;
            background-color: lightpink;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .clear_float::before,
        .clear_float::after {
            content: "";
            display: table;
        }

        .clear_float::after {
            clear: both;
        }

        .diamonds {
            max-width: 1440px;
            min-width: 1120px;
            margin: 0px auto;
        }

        .diamonds > .content,
        .diamonds > .footer{
            width: 88.88889%;
            margin: 0 auto;
        }
    </style>

    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <link rel="stylesheet" href="../resource/font/iconfont.css">
    <link rel="stylesheet" href="../css/product_type.css">

    <script type="text/javascript">
        window.onResizeFuntionList = [];
        window.onresize = function () {
            for(let i in window.onResizeFuntionList){
                let temp = window.onResizeFuntionList[i];
                if(typeof(temp) === "function"){
                    temp();
                }
            }
        }
        window.getNumber = function (min, max) {
            return Math.floor(Math.random() * (max - min + 1) ) + min;
        }
    </script>

</head>
<body>
<div class="diamonds" id="diamonds">
    <script type="text/javascript" src="../js/header.js"></script>

        <div class="content">
            <!-- 商品分类 -->
            <div class="commodity_class">
                <!-- 描述 -->
                <div class="desc">
                    <h2>4-Way Stretch Long Sleeves</h2>
                    <p>
                        Give your casual look an uptown twist with a perfect men blazer.
                        Our collection of men's blazers layer well over nearly everything in anyone's closet;
                        ideal for summer nights out and formal gatherings. Shop blazers for men at
                        7Diamonds.
                    </p>
                    <!-- 展示商品 -->
                    <div class="product_group clear_float">
                        <div class="product_item">
                            <div>
                                <a href="./product.html">
                                    <div class="img">
                                        <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                    </div>
                                </a>
                                <a href="./product.html">
                                    <div class="matiral">
                                        <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                    </div>
                                </a>

                            </div>
                            <!-- 产品信息 -->
                            <div class="product_desc">
                                <!-- 产品名称 -->
                                <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                                <!-- 评星 -->
                                <div class="review">
                                    <div>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <a href="#">3 Review</a>
                                    </div>

                                </div>
                                <!-- 价格 -->
                                <div class="price">$150</div>
                                <!-- 产品颜色 -->
                                <ul class="product_color">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="product_item">
                            <div>
                                <a href="./product.html">
                                    <div class="img">
                                        <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                    </div>
                                </a>
                                <a href="./product.html">
                                    <div class="matiral">
                                        <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                    </div>
                                </a>

                            </div>
                            <!-- 产品信息 -->
                            <div class="product_desc">
                                <!-- 产品名称 -->
                                <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                                <!-- 评星 -->
                                <div class="review">
                                    <div>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <a href="#">3 Review</a>
                                    </div>

                                </div>
                                <!-- 价格 -->
                                <div class="price">$150</div>
                                <!-- 产品颜色 -->
                                <ul class="product_color">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="product_item">
                            <div>
                                <a href="./product.html">
                                    <div class="img">
                                        <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                    </div>
                                </a>
                                <a href="./product.html">
                                    <div class="matiral">
                                        <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                    </div>
                                </a>

                            </div>
                            <!-- 产品信息 -->
                            <div class="product_desc">
                                <!-- 产品名称 -->
                                <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                                <!-- 评星 -->
                                <div class="review">
                                    <div>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <a href="#">3 Review</a>
                                    </div>

                                </div>
                                <!-- 价格 -->
                                <div class="price">$150</div>
                                <!-- 产品颜色 -->
                                <ul class="product_color">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="product_item">
                            <div>
                                <a href="./product.html">
                                    <div class="img">
                                        <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                    </div>
                                </a>
                                <a href="./product.html">
                                    <div class="matiral">
                                        <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                    </div>
                                </a>

                            </div>
                            <!-- 产品信息 -->
                            <div class="product_desc">
                                <!-- 产品名称 -->
                                <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                                <!-- 评星 -->
                                <div class="review">
                                    <div>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <a href="#">3 Review</a>
                                    </div>

                                </div>
                                <!-- 价格 -->
                                <div class="price">$150</div>
                                <!-- 产品颜色 -->
                                <ul class="product_color">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="product_item">
                            <div>
                                <a href="./product.html">
                                    <div class="img">
                                        <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                    </div>
                                </a>
                                <a href="./product.html">
                                    <div class="matiral">
                                        <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                    </div>
                                </a>

                            </div>
                            <!-- 产品信息 -->
                            <div class="product_desc">
                                <!-- 产品名称 -->
                                <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                                <!-- 评星 -->
                                <div class="review">
                                    <div>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <a href="#">3 Review</a>
                                    </div>

                                </div>
                                <!-- 价格 -->
                                <div class="price">$150</div>
                                <!-- 产品颜色 -->
                                <ul class="product_color">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="product_item">
                            <div>
                                <a href="./product.html">
                                    <div class="img">
                                        <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                    </div>
                                </a>
                                <a href="./product.html">
                                    <div class="matiral">
                                        <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                    </div>
                                </a>

                            </div>
                            <!-- 产品信息 -->
                            <div class="product_desc">
                                <!-- 产品名称 -->
                                <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                                <!-- 评星 -->
                                <div class="review">
                                    <div>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <a href="#">3 Review</a>
                                    </div>

                                </div>
                                <!-- 价格 -->
                                <div class="price">$150</div>
                                <!-- 产品颜色 -->
                                <ul class="product_color">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="product_item">
                        <div>
                            <a href="./product.html">
                                <div class="img">
                                    <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                </div>
                            </a>
                            <a href="./product.html">
                                <div class="matiral">
                                    <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                </div>
                            </a>

                        </div>
                        <!-- 产品信息 -->
                        <div class="product_desc">
                            <!-- 产品名称 -->
                            <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                            <!-- 评星 -->
                            <div class="review">
                                <div>
                                    <span class="iconfont icon-shiwujiaoxing"></span>
                                    <span class="iconfont icon-shiwujiaoxing"></span>
                                    <span class="iconfont icon-shiwujiaoxing"></span>
                                    <span class="iconfont icon-shiwujiaoxing"></span>
                                    <span class="iconfont icon-shiwujiaoxing"></span>
                                    <a href="#">3 Review</a>
                                </div>

                            </div>
                            <!-- 价格 -->
                            <div class="price">$150</div>
                            <!-- 产品颜色 -->
                            <ul class="product_color">
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                        <div class="product_item">
                            <div>
                                <a href="./product.html">
                                    <div class="img">
                                        <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                    </div>
                                </a>
                                <a href="./product.html">
                                    <div class="matiral">
                                        <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                    </div>
                                </a>

                            </div>
                            <!-- 产品信息 -->
                            <div class="product_desc">
                                <!-- 产品名称 -->
                                <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                                <!-- 评星 -->
                                <div class="review">
                                    <div>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <a href="#">3 Review</a>
                                    </div>

                                </div>
                                <!-- 价格 -->
                                <div class="price">$150</div>
                                <!-- 产品颜色 -->
                                <ul class="product_color">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                        <div class="product_item">
                            <div>
                                <a href="./product.html">
                                    <div class="img">
                                        <img src="../resource/images/SMP-1458_NAVY1914_700x.webp" alt="">
                                    </div>
                                </a>
                                <a href="./product.html">
                                    <div class="matiral">
                                        <img src="../resource/images/SMP-1458_NAVY_700x_cailiao.webp" alt="">
                                    </div>
                                </a>

                            </div>
                            <!-- 产品信息 -->
                            <div class="product_desc">
                                <!-- 产品名称 -->
                                <a href="./product.html"><span>Traveling Light 4-Way Stretch Shirt</span></a>
                                <!-- 评星 -->
                                <div class="review">
                                    <div>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <span class="iconfont icon-shiwujiaoxing"></span>
                                        <a href="#">3 Review</a>
                                    </div>

                                </div>
                                <!-- 价格 -->
                                <div class="price">$150</div>
                                <!-- 产品颜色 -->
                                <ul class="product_color">
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 跳转页数 -->
                <div class="jump_page">
                    <ul class="clear_float">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">&gt;</a></li>
                    </ul>
                </div>
                <!-- 右下角下拉框 -->
                <div class="drop_pull_content">
                    <div class="drop_pull clear_float">
                        <label>Sort&nbsp;
                            <span class="iconfont icon-xiala"></span>
                        </label>
                    </div>
                     <!-- button -->
                     <div id="button">
                        <button>Featured</button>
                        <button>Best selling</button>
                        <button> Alphabetically, A-Z</button>
                        <button>Price, high to low</button>
                        <button>Date, old to new</button>
                    </div>
                </div>

            </div>
        </div>

    <script type="text/javascript" src="../js/footer.js"></script>
    </div>
</body>
</html>
